<template>
  <v-card title="虚拟树通用平台配置">
    <div class="mb-30">
      <v-alert class="mb-10" type="info">
        <div slot="message">
          <div>
            <span class="blue-text">loadOptions</span>
            配置请求接口，请求参数，获取参数后的树数据的路径
            <br />
            <span class="blue-text">locking</span>
            指定是否自动请求接口，获取数据
          </div>
        </div>
      </v-alert>
      <div class="mb-10">
        <v-input
          class="mr-5 w-200"
          placeholder="过滤条件的键名"
          v-model="filterOption.key"
        ></v-input>
        <v-input
          class="mr-5 w-200"
          placeholder="过滤条件的值"
          v-model="filterOption.value"
        ></v-input>
        <v-button @click="handleSelectNode" class="mr-5">选中节点</v-button>
        <br />

        <v-button @click="handleSearch" class="mr-5">获取数据</v-button
        >当前节点:
        <span v-if="currNode"
          >id:{{ currNode.id }} 、 name:{{ currNode.name }}</span
        >
      </div>
      <vcu-table-virtual-tree
        :columns="tableColumn"
        :height="300"
        :loadOptions="loadOptions"
        :show-header="false"
        :tree-config="treeConfig"
        
        border="none"
        highlight-current-row
        locking
        ref="xTableTree"
        row-key
        show-overflow
      ></vcu-table-virtual-tree>
    </div>
  </v-card>
</template>
<script>
export default {
  name: "platform",
  components: {},
  props: {},
  mixins: [],
  watch: {},
  computed: {},
  data() {
    return {
      filterOption: { key: "id", value: "Z004001001" },
      tableColumn: [{ title: "", field: "name", treeNode: true }],
      treeConfig: {
        children: "childNodeList",
        key: "id",
      },
      loadOptions: {
        url: "dataq/api/page/commonTree",
        formData: {},
        resPath: "data.payload",
      },
      currNode: null,
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 查询
    handleSearch() {
      this.$refs.xTableTree.getTableListData();
    },
    // 数据加载完成
    onPageLoad(res) {
      console.log("数据加载完成", res);
    },
    // 选中的当前行变化
    onCurrentChange({ row }) {
      this.currNode = row;
      console.log("onCurrentChange", row);
    },
    // 选中节点 某满足条件（id == Z004003012）的节点
    handleSelectNode() {
      this.$refs.xTableTree
        .handleSelectNode(this.filterOption, false)
        .then((res) => {
          console.log("选中结果:", res);
        });
    },
  },
  activated() {},
  deactivated() {},
};
</script>
<style lang="less" scoped></style>
